<template>
	<view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar title="收藏线路" navbarType='3'></wlk-navbar>
        <view class="pd30">
            <block v-if="loadStatus=='nomore' && list.length==0">
                <view class="not-data">
                    <u-empty
                            :icon="uEmpty.search"
                            text="没有搜索结果"
                    >
                    </u-empty>
                </view>
            </block>
            <block v-else>
                <view class="mb20">
                    <u-alert title="左滑删除收藏" type="warning" center></u-alert>
                </view>
                <u-swipe-action>
                    <u-swipe-action-item v-for="(line, index) in list" :key="index"
                                         :options="options"
                                         @click="itemClick(index)"
                    >
                        <navigator class="relative wlkflex overHidden" :url="'/pages/line/detail?id=' + line.id">
                            <view class="one-img">
                                <image class="wd100 hg100" lazy-load :src="line.images[0]"  mode="aspectFill"/>
                            </view>
                            <view class="one-info wlkflex align-content-between wrap">
                                <view class="wd100">
                                    <view class="u-line-2 title">{{line.title}}</view>
                                    <view class="u-line-1 desc">{{line.desc}}</view>
                                    <view class="wlkflex tags">
                                        <view class="tags-item" v-for="(tag,i) in line.tagids" v-if="i<2">
                                            <u-tag :text="tag.name" plain size="mini" :color="themeColor" :borderColor="themeColor" ></u-tag>
                                        </view>
                                    </view>
                                </view>
                                <view class="wd100 price-info wlkflex justify-between">
                                    <view v-if="line.minprice>0">
                                        <span>￥</span>
                                        <span class="price">{{line.minprice}}</span>
                                        <span class="ml05">起</span>
                                    </view>
                                    <view v-else>
                                        <span class="col9">暂无库存</span>
                                    </view>
                                    <view class="sales">
                                        {{line.sales}}人出游
                                    </view>
                                </view>
                            </view>
                            <view class="line-start">
                                {{line.startcity[line.startcity.length-1].name}}出发
                            </view>
                        </navigator>
                    </u-swipe-action-item>
                </u-swipe-action>
                <view class="load-more">
                    <u-loadmore :status="loadStatus" :loading-text="loadingText"  :loadmore-text="loadmoreText" :nomore-text="nomoreText" dashed  line />
                </view>
            </block>
        </view>
        <u-modal :show="showModal" @confirm="confirm" title="提示" :content='content' @cancel="showModal=false" :confirmColor="themeColor" showCancelButton></u-modal>
    </view>
</template>

<script>
    var _self;
    import { mapGetters} from 'vuex';
	export default {
        computed:{
            ...mapGetters(['themeColor','uEmpty']),
        },
		data() {
			return {
                options:[{
                    icon: 'trash-fill',
                    style: {
                        backgroundColor: '',
                        width: '40px',
                        height: '40px',
                        borderRadius: '100px',
                        margin: '0 6px',
                    }
                }],
                list:[],
                page: 1,
                choseIndex:'',
                showModal:false,
                content:'确认删除收藏线路?',
                loadStatus:'loading',
                loadingText: '努力加载中',
                loadmoreText: '轻轻上拉',
                nomoreText: '实在没有了',
			};
		},
		onLoad() {
            _self = this;
		},
		onShow() {
            this.loadStatus = 'loading';
            this.page = 1;
            this.list = [];
            this.getData();
		},
        onReady() {
          this.options[0].style.backgroundColor = this.themeColor;
        },
        onReachBottom() {
            if(this.loadStatus == "nomore"){
                return;
            }
            this.page++;
            this.getData();
        },
		methods: {
            itemClick(index){
                this.choseIndex = index;
                this.showModal = true;
            },
            confirm(){
                uni.$u.http.post('like/setLineLike', {id:this.list[this.choseIndex].id}).then(res => {
                    _self.showModal = false;
                    _self.list.splice(_self.choseIndex,1);
                });
            },
			async getData() {
                const res = await uni.$u.http.post("like/getList", {
                    page: this.page,
                });
                if (res && res.data && res.data.rows) {
                    this.list = this.list.concat(res.data.rows);
                }
                this.loadStatus = res.data.rows.length < res.data.limit ? 'nomore' : 'loadmore';
			},
		},
	};
</script>

<style lang="scss">
    .one-img{
        image{
            width: 308rpx;
            height: 308rpx;
            display: block;
        }
    }
    .one-info{
        height: 270rpx;
        width: 400rpx;
        padding: 0 20rpx;
        pointer-events: none;
        .title{
            font-weight: bold;
            font-size: $font-lt;
        }
        .desc{
            font-size: $font-sm;
            color: $-color-muted;
            margin-top: 4rpx;
        }
        .tags{
            margin-top: 8rpx;
            .tags-item{
                margin-right: 10rpx;
            }
        }
        .price-info{
            font-size: $font-base;
            color: $-tour-price-color;
            .price{
                font-size: $font-max;
            }
            .sales{
                font-size: $font-sm;
                color: $-color-muted;
            }
        }
    }
    .line-start{
        position: absolute;
        left: 0;
        top: 0;
        font-size: $font-sm;
        background-color: rgba(0,0,0,0.18);
        border-radius:4px 0 4px 0;
        padding: 6rpx 10rpx;
        color: #FFFFFF;
    }
    .u-swipe-action-item{
        margin-bottom: 20rpx;
        box-shadow: 0 2px 4px rgba(0,0,0,.06)!important;
        border-radius: 4px;
    }
</style>
